<template>
    <view class="machineManage">
      <pagehead>商户管理</pagehead>
      <view class="search-box">
        <view class="left">
            <view>共计{{total}}户</view>
        </view>
        <view class="search">
            <image @click="search()" :src="IMAGE_STATIC + '/images/icon-search.png'" class="ico" mode="heightFix" />
            <input type="text" @confirm="search()" v-model="key_word" placeholder="请输入商户名称">
        </view>
      </view>
      <view class="machineManage-sort">
        <!-- <view v-for="(item,index) in tabList" :key="index"
         :class="[currentIndex == index ? 'active' : '', 'tab-item']" @tap.stop="changeTab(index,item)">{{item.name}}</view> -->
         <view class="item" @tap.stop="getType()">
            交易量
            <image v-if="sortType==''" :src="IMAGE_STATIC+'/images/upDown.png'" class="ico" mode="heightFix" />
            <image v-else-if="sortType=='asc'" :src="IMAGE_STATIC+'/images/upDown-1.png'" class="ico" mode="heightFix" />
            <image v-else-if="sortType=='desc'" :src="IMAGE_STATIC+'/images/upDown-2.png'" class="ico" mode="heightFix" />
          </view>
         <view class="right">
            <view class="item" @tap.stop="modelSortShow = !modelSortShow;">
              <text class="txt">筛选</text>
              <image :src="IMAGE_STATIC+'/images/sort.png'" class="ico" mode="heightFix" />
            </view>
         </view>
      </view>
      <!-- 我的机具 -->
      <view class="typePage">
        <template>
          <scroll-view scroll-y class="typePage-left">
            <view v-for="(item, index) in flist" :key="item.id" :data-id="item.id" class="typePage-left__item b-b"
              :class="[index == tabActiveIndex ? 'active' : '']" @tap.stop="tabtap(item, index)">
              <text>{{ item.name }}</text>
            </view>
          </scroll-view>
          <scroll-view scroll-y class="typePage-right" scroll-with-animation="true" :scroll-into-view="tabActiveText" @scrolltolower="lower" v-if="isShowPage">
            <view class="" :id="'item-' + tabActiveIndex" v-if="isShowPage">
              <view class="typePage-right__list" v-if="categoryLowList.length != 0">
                <!--  -->
                <view v-for="(item) in categoryLowList" :key="item.id" class="typePage-right__item"
                  @tap.stop="$tools.jump('/pages/machineManage/merchantManageDetail', item.sn_code)">
                    <view class="name">{{item.name}} |<text class="">{{item.phone_no}}</text></view>
                    <view class="p">商户名称：{{item.merchant_name}}</view>
                    <view class="p">本月交易额：{{viewCount(item.month_trade_money)}}元</view>
                    <view class="p">总交易额：{{viewCount(item.total_trade_money)}}元</view>
                    <view class="p">服务费：{{item.is_fee == 1 ?'是':'否'}}</view>
                    <view class="p">注册时间：{{(item.merchant_register_time)}}</view>
                    <view class="p">激活时间：{{(item.active_date)}}</view>
                  </view>
                <view class="initNoData" v-if="categoryLowList.length == 0"></view>
              </view>
            </view>
          </scroll-view>
        </template>
      </view>
       <!-- 筛选弹窗 -->
     <view v-if="modelSortShow" ref="sortPopu" class="model-bg" @tap="modelSortShow = false" :style="{ top: `calc(88rpx + ${statusBarHeight}px)` }">
        <view class="modal" @tap.stop="modelSortShow = true">
          <view class="sortPopu">
            <view class="title">注册时间</view>
            <view class="info">
              <view class="label">开始时间</view>
              <view class="txt">
                <picker mode="date" :value="chooseObj.startDate" :start="startDateValid" end="2999-12-31"
                  @change="startDatePicker">
                  <view>{{ chooseObj.startDate ? chooseObj.startDate : '请选择开始时间' }}</view>
                </picker>
                <image :src="IMAGE_STATIC+'/images/arrow-right.png'" class="ico" mode="heightFix" />
              </view>
            </view>
            <view class="info border-b">
              <view class="label">结束时间</view>
              <view class="txt">
                <picker mode="date" :value="chooseObj.endData" :start="startDateValid" end="2999-12-31"
                  @change="endDatePicker">
                  <view>{{ chooseObj.endData ? chooseObj.endData : '请选择结束时间' }}</view>
                </picker>
                <image :src="IMAGE_STATIC+'/images/arrow-right.png'" class="ico" mode="heightFix" />
              </view>
            </view>
            <view class="title mt-10">激活时间</view>
            <view class="info">
              <view class="label">开始时间</view>
              <view class="txt">
                <picker mode="date" :value="chooseObj.startDate1" :start="startDateValid" end="2999-12-31"
                  @change="startDatePicker1">
                  <view>{{ chooseObj.startDate1 ? chooseObj.startDate1 : '请选择开始时间' }}</view>
                </picker>
                <image :src="IMAGE_STATIC+'/images/arrow-right.png'" class="ico" mode="heightFix" />
              </view>
            </view>
            <view class="info">
              <view class="label">结束时间</view>
              <view class="txt">
                <picker mode="date" :value="chooseObj.endData1" :start="startDateValid" end="2999-12-31"
                  @change="endDatePicker1">
                  <view>{{ chooseObj.endData1 ? chooseObj.endData1 : '请选择结束时间' }}</view>
                </picker>
                <image :src="IMAGE_STATIC+'/images/arrow-right.png'" class="ico" mode="heightFix" />
              </view>
            </view>
            <view class="bottom-box">
              <view class="bottom">
                <view class="btn reset" @tap.stop="reset()">重置</view>
                <view class="btn sure" @tap.stop="sure()">确定</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </template>
  
  <script>
  export default {
    data() {
      return {
        IMAGE_STATIC: this.$url.assetsPath, // 静态图片地址
        total: 0,
        tabActiveIndex:0,
        tabActive:'',
        pageIndex: 1,
        pageSize: 10,
        lastId:'',
        key_word:'',
        tabList:[
        {name:'全部'},
        {name:'按业务'},
        {name:'按日期'},
        {name:'按状态'},
        ],
        flist: [
          { id: 1, cateName: '龙腾版' },
          { id: 2, cateName: '龙腾版' },
          { id: 3, cateName: '龙腾版' },
          { id: 4, cateName: '龙腾版' },
          { id: 5, cateName: '龙腾版' },
          { id: 6, cateName: '龙腾版' },
        ],
        categoryLowList: [
          { id: 1, no: '000006026202', status: 1, },
          { id: 2, no: '000006026202', status: 1, },
          { id: 3, no: '000006026202', status: 0, },
          { id: 4, no: '000006026202', status: 1, },
          { id: 5, no: '000006026202', status: 1, },
          { id: 6, no: '000006026202', status: 1, },
        ],
        sortType:0, // 排序
        isShowPage: true,
        lsShow: false,
        // 弹窗
        currentIndex:0,
        modelSortShow: false,
        // 选择时间范围
        startDateValid: '1900-01-01',
        chooseObj:{
          startDate:'',
          endData:'',
          startDate1:'',
          endData1:'',
        },
        statusBarHeight:0,
      };
    },
    // 下拉刷新
    onPullDownRefresh() {
      console.log('refresh');
      this.init();
      this.isLoadShow = true;
      setTimeout(function () {
        uni.stopPullDownRefresh();
      }, 500);
    },
    onReachBottom() {
    console.log("分页");
    if (this.lsShow == true) {
      this.getGoodsList();
    } else {
      // return this.$tools.toast('到底了');
    }
  },
    onLoad() {
      this.init() 
      const that = this
      //获取手机型号
      uni.getSystemInfo({
        success: function (res) {
        that.statusBarHeight = res.statusBarHeight//状态栏高度
        that.platform = res.platform//机型
        console.log('platform',that.platform ,',statusBarHeight',that.statusBarHeight)
        }
      });
    },
    methods: {
      init() {
        this.flist = [];
        this.total = 0;
        this.pageIndex = 1;
        this.lastId = '';
        this.isShowPage = false;
        this.categoryLowList = []
        this.getCategoryOneList()
      },
      search(){
        this.total = 0;
        this.pageIndex = 1;
        this.lastId = '';
        this.isShowPage = false;
        this.categoryLowList = []
        this.getTotal()
        this.getGoodsList()
      },
      // 分类列表
      getCategoryOneList() {
        var data = {
          is_active:this.chooseObj.status,
        };
        this.$Ajax('/api/system/posName/getSysPosNameList', data, res => {
          if (res.success) {
            this.flist = res.data.sysPosNameList;
            this.tabActiveIndex = 0;
            this.tabActive = res.data.sysPosNameList[0].id;
            this.tabActiveText = 'item-' + this.tabActive;
            this.getTotal()
            this.getGoodsList()
          }
        }, err => {
        }
        )
      },
      // 获取总数
      getTotal(){
        var data = {
          pos_name_id: this.tabActive, // 类型编号
          key_word:this.key_word,
          reg_start_date:this.chooseObj.startDate,
          reg_end_date:this.chooseObj.endData,
          active_start_date:this.chooseObj.startDate1,
          active_end_date:this.chooseObj.endData1,
        };
        this.$Ajax('/api/user/merchant/getUserMerchantTotal', data, res => {
          if (res.success) {
            this.total = res.data.userMerchantTotal.merchant_num
          }
        }, err => {
        }
        )
      },
      // 数据
      getGoodsList() {
        let that = this;
        var data = {
          pos_name_id: this.tabActive, // 类型编号
          key_word:this.key_word,
          page_num:this.pageIndex,
          sort:this.sortType,
          reg_start_date:this.chooseObj.startDate,
          reg_end_date:this.chooseObj.endData,
          active_start_date:this.chooseObj.startDate1,
          active_end_date:this.chooseObj.endData1,
        };
        console.log("data", data);
        uni.showLoading({
          mask: true
        })
        this.$Ajax('/api/user/merchant/getUserMerchantList', data, res => {
          uni.hideLoading();
          this.isShowPage = true;
          this.categoryLowList = this.categoryLowList.concat(res.data.userMerchantList);
          if(this.categoryLowList.length < this.total){
            this.pageIndex ++
            this.lsShow = true
          }else{
            this.lsShow = false
          }
        }, err => {
        }
        );
      },
      //一级分类点击
      tabtap(item, index) {
        console.log(11)
        if (this.tabActiveIndex != index) {
          this.tabActive = item.id;
          this.tabActiveText = 'item-' + item.id;
          this.tabActiveIndex = index;
          this.search()
        }
      },
       // 切换
      changeTab(index){
        if(this.currentIndex != index){
          this.currentIndex = index
          this.chooseObj.status = index
          this.total = 0;
          this.pageIndex = 1;
          this.pageSize = 10;
          this.lastId = ''
          this.isShowPage = false;
          this.categoryLowList = []
          this.getGoodsList();
        }
      },
      // 升降序
			getType(){
				let that = this;
        if(this.sortType==''){
          this.sortType='asc'
        }else if(this.sortType=='asc'){
          this.sortType='desc'
        }else if(this.sortType=='desc'){
          this.sortType=''
        }
        this.pageIndex = 1;
        this.pageSize = 10;
        this.lastId = ''
        this.isShowPage = false;
        this.categoryLowList = []
        this.getGoodsList();
			},
      // 开始时间选择
      startDatePicker(e) {
        // 获取用户选择的日期
        // this.chooseObj.startDate = e.detail.value;
        const time = e.detail.value;
        console.log('选择的日期：', e.detail.value);
        if (new Date(time) > new Date(this.chooseObj.endData)) {
          this.chooseObj.startDate = this.chooseObj.endData; // 重置开始时间
        } else {
          this.chooseObj.startDate = time;
        }
      },
      // 结束时间选择
      endDatePicker(e) {
        // 获取用户选择的日期
        // this.chooseObj.endData = e.detail.value;
        const time = e.detail.value;
        console.log('选择的日期：', e.detail.value);
        if (new Date(time) < new Date(this.chooseObj.startDate)) {
          this.chooseObj.endData = this.chooseObj.startDate; // 重置开始时间
        } else {
          this.chooseObj.endData = time;
        }
      },
      // 开始时间选择
      startDatePicker1(e) {
        // 获取用户选择的日期
        // this.chooseObj.startDate1 = e.detail.value;
        const time = e.detail.value;
        console.log('选择的日期：', e.detail.value);
        if (new Date(time) > new Date(this.chooseObj.endData1)) {
          this.chooseObj.startDate1 = this.chooseObj.endData1; // 重置开始时间
        } else {
          this.chooseObj.startDate1 = time;
        }
      },
      // 结束时间选择
      endDatePicker1(e) {
        // 获取用户选择的日期
        // this.chooseObj.endData1 = e.detail.value;
        const time = e.detail.value;
        console.log('选择的日期：', e.detail.value);
        if (new Date(time) < new Date(this.chooseObj.startDate1)) {
          this.chooseObj.endData1= this.chooseObj.startDate1; // 重置开始时间
        } else {
          this.chooseObj.endData1 = time;
        }
      },
      // 重置
      reset() {
        this.resFilds()
        this.modelSortShow = false
        this.init()
      },
      sure(){
        this.modelSortShow = false
        this.init()
      },
      // 清空数据
      resFilds(){
        this.chooseObj = {  // 筛选条件
          startDate: '', //开始时间
          endData: '',  //结束时间
          startDate1:'',
          endData1:'',
        }
      },
      lower() {
        console.log("分页", this.lsShow);
        if (this.lsShow == true) {
          this.getGoodsList();
        } else {
          // return this.$tools.toast('到底了');
        }
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .machineManage {
    background: #fff;
    position: relative;
    height: 100vh;
    overflow: hidden;
    .search-box{
        @include flexBetween;
        padding: 20rpx;
        .left{
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
            line-height: 33rpx;
            max-width: 220rpx;
            width: 220rpx;
        }
        .search{
            width: calc(100% - 240rpx);
            height: 88rpx;
            line-height: 88rpx;
            background: #F1F1F1;
            border-radius: 16rpx;
            padding: 0 30rpx;
            @include flexLeft;
            box-sizing: border-box;
            .ico{
              width: 27rpx;
              height: 27rpx;
              margin-right:26rpx;
            }
            input{
              font-weight: 500;
              font-size: 28rpx;
              color: #333;
            }
        }
    }
    &-sort{
      overflow: hidden;
      @include flexBetween;
      margin-top: 20rpx;
      padding: 0 36rpx;
      .active{
        color: #D1242A;
        border-bottom: 2rpx solid #D1242A;
      }
      .right{
        @include flexLeft;
      }
      .item{
        @include flexLeft;
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
        font-weight: bold;
        line-height: 33rpx;
        margin-left: 20rpx;
      }
      .upDown,.ico{
        width: 32rpx;
        height: 32rpx;
        margin-left: 10rpx;
      }
    }
    .typePage {
      display: flex;
      justify-content: space-between;
      position: relative;
      margin-top: 40rpx;
      max-height: calc(100vh - 88rpx);
      &-left {
        width: 220rpx;
        background: #fff;
        height: 100vh;
        padding: 0 16rpx;
        /deep/ .uni-scroll-view-content{
          width: 220rpx;
        }
        &__item {
          text-align: center;
          height: 96rpx;
          font-weight: 500;
          font-size: 28rpx;
          color: #333333;
          border-bottom: 1px solid rgba(51, 51, 51, 0.1);
          @include flexCenterColumn;
        }
        &__item:last-of-type{
          border-bottom: none;
        }
  
        &__item.active {
          color: #D1242A;
          background: #F4F4F4;
        }
      }
  
      &-right {
        width: calc(100% - 280rpx);
        margin: 20rpx;
        margin-top: 0;
        padding-bottom: 240rpx;
        /* #ifdef MP-WEIXIN */
        padding-bottom: 240rpx;
        /* #endif */
        &__item {
          width: 100%;
          background: #fff;
          border-radius: 16rpx 16rpx 16rpx 16rpx;
          border: 2rpx solid rgba(51, 51, 51, 0.1);
          padding: 24rpx 20rpx;
          box-sizing: border-box;
          margin-top: 20rpx;
          .name {
            @include flexLeft;
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
            line-height: 48rpx;
          }
          .p {
            font-size: 24rpx;
            color: #666666;
            line-height: 28rpx;
            margin-top: 8rpx;
          }
  
        }
        &__item:nth-of-type(1) {
          margin-top: 0;
        }
      }
    }
  }
  </style>
  